<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/qs.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<h5>
    <a href="">ref</a>
</h5>
<div id="logs">
    <el-form :inline="true" :model="logt" class="demo-form-inline">
        <el-form-item label="物流公司名称">
            <el-input v-model="logt.logisticsName" autocomplete="off" @change="logsChange(logt.logisticsName)"  placeholder="输入物流公司名称"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="find" circle></el-button>
        </el-form-item>
    </el-form>
    <el-button @click="dialogFormVisible = true"
               type="primary" plain>添加公司</el-button>
    <el-dialog title="公司信息" :visible.sync="dialogFormVisible" @close="closeDialog">
        <el-form :model="logistic">
            <el-form-item label="公司名称">
                <el-input v-model="logistic.logisticsName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="负责人">
                <el-input v-model="logistic.principal" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="联系方式">
                <el-input v-model="logistic.logisticsContact" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="运营区域">
                <el-input v-model="logistic.area" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="每吨价格">
                <el-input v-model="logistic.price" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="每吨价格">
                <el-input v-model="logistic.price" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="logistic.remarks" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveLogistic">确 定</el-button>
        </div>
    </el-dialog>

    <el-table
            :data="logistics"
            style="width: 100%">
        <el-table-column
                label="编号"
                width="180">
            <template slot-scope="scope">
                <i class="el-icon-loading"></i>
                <span style="margin-left: 10px">{{ scope.row.logisticsId }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="名称"
                width="180">
            <template slot-scope="scope">
                <i class="el-icon-s-home"></i>
                <span style="margin-left: 10px">{{ scope.row.logisticsName }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="负责人"
                width="180">
            <template slot-scope="scope">
                <i class="el-icon-s-custom"></i>
                <span style="margin-left: 10px">{{ scope.row.principal }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="联系方式"
                width="180">
            <template slot-scope="scope">
                <i class="el-icon-phone"></i>
                <span style="margin-left: 10px">{{ scope.row.logisticsContact }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="区域"
                width="180">
            <template slot-scope="scope">
                <i class="el-icon-moon"></i>
                <span style="margin-left: 10px">{{ scope.row.area }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="加入时间"
                width="180">
            <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.joinTime }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="价格"
                width="180">
            <template slot-scope="scope">
                <i class="el-icon-pear"></i>
                <span style="margin-left: 10px">{{ scope.row.price }}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)"
                        type="primary"
                        icon="el-icon-edit" circle></el-button>
                <el-popconfirm
                        @confirm="handleDelete(scope.$index, scope.row)"
                        title="确定删除吗？">
                    <el-button
                            size="mini"
                            slot="reference"
                            type="danger" icon="el-icon-delete" circle></el-button>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>
    <!--分页-->
    <div class="block" style="margin-top: 10px;">
        <el-pagination @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-sizes="page_size"
                       :page-size="4"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="count"
                       :background="back">
        </el-pagination>
    </div>
</div>
<script>
    <!---->
    new Vue({
        el:"#logs",
        data(){
            return{
                dialogFormVisible:false,
                logistics:[],
                // 当前页数
                currentPage: 1,
                // 总数
                count : 0,
                // 每页的数据
                page_size : [3,6],
                // 当前每页的数据
                pageSize : 3,
                // 分页背景
                back: true,
                logistic:{},
                logt:{},
                logisticsName:""
            }
        },
        methods:{
            logsChange(val){
                if (val == null){
                    return;
                }else {
                    this.logisticsName = val;
                }
            },
            loadLogs(){
                axios.get("/logistics/"+this.currentPage+"/"+this.pageSize+"?logisticsName="+this.logisticsName)
                    .then(res =>{
                        this.logistics=res.data.data;
                        this.count=res.data.count;
                    })
            },
            handleEdit(index, row) {
                this.logistic=JSON.parse(JSON.stringify(row));
                this.dialogFormVisible=true;
            },
            handleDelete(index, row) {
                axios.delete("/logistic/" + row.logisticsId)
                    .then(res =>{
                        if(res.data=="ok"){
                            this.loadLogs();
                        }
                    })
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.loadLogs();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.loadLogs();
            },
            saveLogistic(){
                let logs = JSON.parse(JSON.stringify(this.logistic));
                axios.post("/logistic",logs)
                    .then(res =>{
                        if(res.data=="ok"){
                            this.dialogFormVisible=false;
                            this.loadLogs();
                        }
                    })
            },
            closeDialog(){
                this.logistic =  {}
            },
            find(){
                this.loadLogs();
            }
        },
        mounted(){
            this.loadLogs();
        }
    })
</script>
</body>
</html>